<script setup>
import { ref, computed, onMounted } from "vue";
import { FetchFunc } from "../request/http"
defineProps({
  msg: String,
});

const count = ref(0);

const itemvalue = ref("");
const listdata = ref([]);
const adddata = () => {
  // console.log(itemvalue.value);
  // showAll.value = true;
  // listdata.value.push({
  //   itemname: itemvalue.value,
  //   state: 0,
  //   showInput: false,
  // });
  // localStorage.setItem("mylist", JSON.stringify(listdata.value));
if(!itemvalue.value){
  alert('不能为空')
  return
}
  const data = {
    itemname: itemvalue.value,
    state: 0,
    showInput: false,
  };
  fetch("/api/add", {
    method: "post",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
  }).then(function (d) {
    // console.log(d)
    getdata();
  });
};

onMounted(() => {
  // const str = localStorage.getItem("mylist");
  // if (str) listdata.value = JSON.parse(str);


  getdata();


});
const btnText = ref("修改");
const isInputShow = ref(false);

const deldata = (index,id) => {
  //console.log(index)

  if (confirm("真的要删除吗?")) {
    listdata.value.splice(index, 1);
    localStorage.setItem("mylist", JSON.stringify(listdata.value));

    fetch("/api/del/"+id, {
    method: "delete",    
    headers: {
      "Content-Type": "application/json",
    },
  }).then(function (d) {
    // console.log(d)
    getdata();
  });

  }
};

const editdata = (index) => {
  console.log(index);
  editDataInLocal(index, btnText);
 
  // isInputShow.value = !isInputShow.value
};

const searchdata = () => {
  showAll.value = true;
  const result = [];
  for (let i = 0; i < listdata.value.length; i++) {
    // console.log(listdata.value[i])
    // console.log(itemvalue.value)

    if (listdata.value[i].itemname.indexOf(itemvalue.value) != -1) {
      // console.log(listdata.value[i])
      listdata.value[i].show = true;
      showAll.value = false;
      // result.push(listdata.value[i])
    } else {
      listdata.value[i].show = false;
    }
  }

  // listdata.value = result
}; //axios
const getdata = async () => {
listdata.value =await FetchFunc("/mock/user/list");


  // let text = await res.text();
  // const data = JSON.parse(text)
//  const res =await fetch("/api/todolist/list");
//   const data = await res.json();
//    console.log(res)
//   console.log(data);
//   showAll.value=true
//   if (res.ok) {
//     listdata.value = data.data;
//   }

  //   const data = [];
  // showAll.value=true
  //   for (let i = 0; i < 5; i++) {
  //     data.push({ itemname: "zhangsan" + i, state: i % 2 });
  //   }

  //   listdata.value = data; //  [{itemname:'zhangsan',state:0},{itemname:'lisi',state:1}]
};

const showAll = ref(true);
const showlist = computed(() => {
  if (showAll.value) {
    return listdata.value;
  } else {
    const result = listdata.value.filter((item) => item.show);
    console.log(result);
    return result;
  }
});

// console.log(data)

const editDataInLocal=(index, btnText)=> {
  for (let i = 0; i < listdata.value.length; i++) {
if (i != index) listdata.value[i].showInput = false;
}

if (listdata.value[index].showInput) {
//isInputShow.value = false
listdata.value[index].showInput = false;
btnText.value = "修改";
fetch("/api/edit/"+index, {
    method: "put",
    body: JSON.stringify(listdata.value[index]),
    headers: {
      "Content-Type": "application/json",
    },
  }).then(function (d) {
    // console.log(d)
    getdata();
  });


} else {
btnText.value = "保存";
//isInputShow.value = true
listdata.value[index].showInput = true;
}

localStorage.setItem("mylist", JSON.stringify(listdata.value));
}
</script>

<template>
  <div class="card">
    <h1>{{ msg }}</h1>

    <input type="text" v-model="itemvalue" />
    <button type="button" @click="adddata">添加数据</button>

    <button type="button" @click="searchdata">搜索</button>

    <!-- <input type="checkbox" v-model="showAll" value="显示全部"> -->
    <button type="button" @click="getdata">获取后端数据</button>
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
    <!-- <ul>
      <li v-for="(item, index) in listdata" :key="index">姓名：{{ item.name }}</li>
    </ul> -->

    <table border="1" v-if="listdata.length > 0">
      <tr>
        <th>待办事项</th>
        <th>状态</th>
      </tr>
      <tr v-for="(item, index) in showlist" :key="index">
        <td>
          <span v-if="!item.showInput"> {{ item.itemname }}</span>

          <input type="text" v-model="item.itemname" v-if="item.showInput" />
        </td>
        <td>
          <span v-if="!item.showInput">
            {{ item.state == 1 ? "完成" : "未完成" }}</span
          >
          <select v-model="item.state" v-if="item.showInput">
            <option value="0">未完成</option>
            <option value="1">完成</option>
          </select>
        </td>

        <td>
          <button type="button" @click="editdata(index)">
            {{ item.showInput ? "保存" : "修改" }}
          </button>
          <button type="button" @click="deldata(index,item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
